<!-- nextTick -->
<template>
  <div class="noteClass">
    <h3>#概念</h3>
    <p>this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行</p>
    <p>在修改数据之后立即使用它，然后等待 DOM 更新</p>
    <h3>#使用</h3>
    <pre v-highlight>
      <code class="lang-javascript">
          {{code1}}
      </code>
    </pre>
    <h3>#应用场景</h3>
    <p>created()中进行的DOM操作可以放在this.$nextTick()的回调函数中</p>
    <p>如果你在数据改变之后的操作跟改变之后的DOM有关，那么就应该使用Vue.nextTick()</p>
  </div>
</template>

<script>
export default {
  name:'nextTick',
  components: {},
  data() {
    return {
      code1:`
        <h1 ref="hello">{{ value }}</h1>
        data() {
          return {
            value: 'Hello World ~'
          };
        },
        methods: {
          get() {
            this.value = '你好啊';
            console.log(this.$refs['hello'].innerText);//Hello World ~
            this.$nextTick(() => {
              console.log(this.$refs['hello'].innerText);//你好啊
            });
          }
        },
      `
    }
  },
  methods: {
    
  }
}
</script>
<style scoped>
</style>